import React, { useState } from "react";

// hooks只能给函数组件用，可以是函数组件拥有类组件的功能
// hooks只能写在函数组件的顶层

const App = () => {
  // useState专门用来定义state
  // 执行的时候可以接收一个参数,参数就是这个state的初始值
  // 返回的是一个数组, 数组里面的第一项是变量，第二项是改变这个变量的方法
  const [count, set_count] = useState(5);
  // const [num, set_num] = useState(10);
  const num = 10;

  // const [state, setState] = useState({
  //   count: 5,
  //   num: 10,
  // });

  const add = () => {
    // set_count里面接收一个参数，如果要改成固定的值，直接写值，要基于原先的值，要写函数
    // set_count是异步的
    // set_count(8);
    set_count((count) => count + 1);
    console.log(count);
  };

  return (
    <>
      <h3>useState</h3>
      <button>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <p>{num}</p>
    </>
  );
};

export default App;
